<template>
  <div class="appBox">
    <div class="appstar" style="border-radius: 5px;">
      <div class="appstar_item">
        <div class="appstar_item_title">
          <span class="red">*</span>填写网址：
        </div>
        <div class="appstar_item_input">
          <input type="text" placeholder="请填写移动端网址，，默认以http://开头" v-model="url" @blur="addHttp" />
          <span class="reds" v-show="isUrl">请输入移动端网址</span>
        </div>
      </div>
      <div class="appstar_item">
        <div class="appstar_item_title">
          <span class="red">*</span>填写名称：
        </div>
        <div class="appstar_item_input">
          <input type="text" placeholder="APP名称" v-model="appname" @blur="AppName()" />
          <span class="reds" v-show="isAppName">请输入应用名称</span>
        </div>
      </div>
      <div class="appstar_item">
        <div class="appstar_item_title">
          <span class="red">*</span>启动屏倒计时设置：
        </div>
        <div class="appstar_item_input">
          <input type="text" placeholder="0-10秒以内，为零则没有倒计时" v-model="settime" @blur="StartTime()" />
          <span class="reds" v-show="isStartTime">请输入启动屏倒计时</span>
        </div>
      </div>
      <div class="appstar_item">
        <div class="appstar_item_title">
          <span class="red">*</span>启动图裁剪选项：
        </div>
        <div class="appstar_item_input">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="tips">
        <div class="tips_title">注意：</div>
        <div class="tips_msg">
          <div>1.由于手机屏幕高宽比杂乱不统一，请启用裁剪以确保不会变形。</div>
          <div style="margin-top:10px;">
            2.强烈建议：按右侧图中所示的规格制作启动图，以保证展示效果。
          </div>
        </div>
      </div>
    </div>
    <div class="appstar" style="border-radius: 5px;margin-top:15px;background-color: #151515;">
      <div class="upAppIcon">
        <div class="text"><span class="red">* </span> 上传应用图标和启动图：<span style="color: #999999;">(有可选填字样的可以不填)</span>
          <span class="reds" v-show="All">请上传启动图和应用图标</span>
        </div>
        <div class="flex flex-row flex-wrap">
          <div>
            <cosupload :type="'1'" :module="'images/appicon'" :change="upIcoChange1" :success="upIcosuccess1"
              :beforeupload="upIcoBeForeUpload">
              <div class="avatar-uploader-icon1">
                <img :src="iconUrl" alt="">
              </div>
            </cosupload>
          </div>
          <div>
            <cosupload :type="'1'" :module="'images/appicon'" :change="upIcoChange2" :success="upIcosuccess2"
              :beforeupload="upIcoBeForeUpload">
              <div class="avatar-uploader-icon2">
                <img :src="launchUrl" alt="">
              </div>
            </cosupload>
          </div>
          <!-- <div>
            <cosupload :type="'1'" :module="'images/appicon'" :change="upIcoChange3" :success="upIcosuccess3"
              :beforeupload="upIcoBeForeUpload">
              <div class="avatar-uploader-icon3">
                <img :src="iosiconUrl" alt="">
              </div>
            </cosupload>
          </div>
          <div>
            <cosupload :type="'1'" :module="'images/appicon'" :change="upIcoChange4" :success="upIcosuccess4"
              :beforeupload="upIcoBeForeUpload">
              <div class="avatar-uploader-icon4">
                <img :src="ipadiconUrl" alt="">
              </div>
            </cosupload>
          </div> -->
        </div>
      </div>
    </div>
    <div class="appbuy" style="border-radius: 5px;">
      <!-- <div class="appstar_item">
        <div class="buyItem">
          <span class="red">*</span>购买正式版本(可多选)：
        </div>
        <div class="check">
          <el-checkbox v-model="buyAndroid" @change="price()">安卓版(38元)</el-checkbox>
          <el-checkbox v-model="buyIos" @change="price()">苹果版(108元)</el-checkbox>
        </div>
      </div> -->
      <div class="appstar_item" style="margin-bottom:10px;">
        <div class="text">
          <span class="red">*</span>购买正式版本(可多选)：
        </div>
      </div>
      <div class="">
        <div class="selectedAndroid">
          <img class="selectedAndroid-app" src="/static/packApp/editApp/createMyApp/安卓版未选中.png" />
          <img class="selectedAndroid-click" src="/static/packApp/editApp/createMyApp/组 1108.png"
            @click="selectedApp(1)" />
        </div>
        <div class="selectedIOS">
          <img class="selectedIOS-app" src="/static/packApp/editApp/createMyApp/苹果版未选中.png" />
          <img class="selectedIOS-click" src="/static/packApp/editApp/createMyApp/组 1108.png" @click="selectedApp(2)" />
        </div>
      </div>
      <div class="money text">当前需支付: <span class="price">{{allPrice}}</span>元<span
          class="tishi">(请选择支付方式，支付成功后可立即生成安装包，可在新建记录查看)</span></div>

      <!-- <div class="flex flex-row" style="margin-top: 20px;">
        <div class="wx">
          <img src="../../../static/packApp/editApp/editMyApp/WeChat.png" alt=""
            style="width: 20px;height: 20px;margin-right:10px;">
          <div>微信支付</div>
        </div>
        <div class="zfb" @click="submit(2)">
          <img src="../../../static/packApp/editApp/editMyApp/Alipay.png" alt=""
            style="width: 20px;height: 20px;margin-right:10px;">
          <div>支付宝跳转支付</div>
        </div>
      </div> -->
      <div class="flex flex-row" style="margin-top: 20px;">
        <div class="wx" @click="selectedPayMethod(1)">
          <img class="paywx" src="../../../static/packApp/editApp/createMyApp/微信支付未选中.png" alt="">
        </div>
        <div class="zfb" @click="selectedPayMethod(2)">
          <img class="payzfb" src="../../../static/packApp/editApp/createMyApp/支付宝支付未选中.png" alt="">
        </div>
      </div>
      <div class="flex flex-row" style="margin-top: 30px;">
        <div class="submitpay" @click="submit()">支付</div>
      </div>
    </div>
  </div>
</template>

<script>
  // import ossupload from "../common/OSSUpload";
  import cosupload from '../common/COSUpload';
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      cosupload
    },
    data() {
      //这里存放数据
      return {
        options: [{
            value: "1",
            label: "不裁剪（拉伸铺满屏幕）"
          },
          {
            value: "2",
            label: "上对齐：裁剪下边沿或左右边沿"
          },
          {
            value: "3",
            label: "下对齐：裁剪上边沿或左右边沿"
          },
          {
            value: "4",
            label: "中对齐：裁剪上下边沿或左右边沿"
          },
          {
            value: "5",
            label: "左对齐：裁剪上下边沿或右边沿"
          },
          {
            value: "6",
            label: "右对齐：裁剪上下边沿或左边沿"
          }
        ],
        url: '', //应用地址
        appname: '', //应用名称
        value: "1", //裁剪方式
        settime: '', //启动时间
        iconUrl: '../../../static/packApp/editApp/createMyApp/组2046@2x.png',
        launchUrl: '../../../static/packApp/editApp/createMyApp/组2047@2x.png',
        iosiconUrl: '../../../static/packApp/editApp/createMyApp/组2049@2x.png',
        ipadiconUrl: '../../../static/packApp/editApp/createMyApp/组2048@2x.png',
        buyAndroid: false, //是否购买安卓
        buyIos: false, //是否购买ios
        appID: '', //appid
        orderID: '', //订单号
        getCode: "",
        allPrice: 0,
        //验证
        isUrl: false,
        isAppName: false,
        isStartTime: false,
        All: false,
        payType: 0
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      //失去焦点事件
      addHttp() {
        if (this.url === '') {
          this.isUrl = true;
        } else if (this.url.toLowerCase().search("http://") == -1 && this.url.toLowerCase().search(
            "https://") == -1) {
          this.url = "http://" + this.url;
          this.isUrl = false;
        } else {
          this.url = this.url.toLowerCase();
          this.isUrl = false;
        }
      },
      price() {
        if (this.buyAndroid === true && this.buyIos === false) {
          this.allPrice = 38;
        } else if (this.buyIos === true && this.buyAndroid === false) {
          this.allPrice = 108;
        } else if (this.buyIos === true && this.buyAndroid === true) {
          this.allPrice = 146;
        } else {
          this.allPrice = 0;
        }
      },
      upIcoBeForeUpload(file) {
        console.log(file);
        const isJPG = file.raw.type === "image/jpeg";
        const isPNG = file.raw.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 1;
        if (!isJPG && !isPNG) {
          this.$message.error("上传头像图片只能是 JPG  PNG 格式!");
          return false;
        }
        // 如果该文件大于1M 则返回
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过1M!");
          return false;
        }
        // console.log(isJPG);
        // console.log(isPNG);
        // console.log(isLt2M);
        return isJPG || (isPNG && isLt2M);
      },
      upIcoChange1(res) {
        this.iconUrl = window.URL.createObjectURL(res.raw);
      },
      upIcosuccess1(res) {
        this.iconUrl = res;
      },
      upIcoChange2(res) {
        this.launchUrl = window.URL.createObjectURL(res.raw);
      },
      upIcosuccess2(res) {
        this.launchUrl = res;
      },
      upIcoChange3(res) {
        this.iosiconUrl = window.URL.createObjectURL(res.raw);
      },
      upIcosuccess3(res) {
        this.iosiconUrl = res;
      },
      upIcoChange4(res) {
        this.ipadiconUrl = window.URL.createObjectURL(res.raw);
      },
      upIcosuccess4(res) {
        this.ipadiconUrl = res;
      },
      submit(val) {
        val = this.payType;
        var params = new URLSearchParams();
        params = new FormData();
        if (this.url !== '') {
          params.append("url", this.url);
          this.isUrl = false;
        } else {
          this.isUrl = true;
        }
        if (this.appname !== '') {
          params.append("appname", this.appname);
        } else {
          this.AppName();
        }
        if (this.settime !== '') {
          params.append("lastTime", this.settime);
        } else {
          this.StartTime();
        }
        if (this.value !== '') {
          params.append("cutType", this.value);
        }
        if (this.iconUrl !== undefined) {
          this.All = false;

          params.append("iconUrl", this.iconUrl);
        } else {
          this.All = true;
        }
        if (this.launchUrl !== undefined) {
          this.All = false;
          params.append("launchUrl", this.launchUrl);
        } else {
          this.All = true;
        }
        this.$post(this.API.addApp, params).then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.appID = res.data.appID;
            this.payway(val);
          } else {
            return false;
          }
        })

      },
      payway(pay) {
        var params = new URLSearchParams();
        params.append("appId", this.appID);
        params.append("paytype", pay);
        if (this.buyAndroid === true) {
          params.append("buyAndroid", 1);
        } else {
          params.append("buyAndroid", 0);
        }
        if (this.buyIos === true) {
          params.append("buyIos", 1);
        } else {
          params.append("buyIos", 0);

        }
        this.$post(this.API.payAddApp, params).then((res) => {
          this.orderID = res.data.orderid;
          this.getCode = res.data.payIndex;
          if (pay === 1) {
            this.$router.push({
              path: "/wechat",
              name: "wechat",
              query: {
                orderID: this.orderID,
                code: this.getCode,
              },
            });
          } else {
            document.querySelector("body").innerHTML = res.data; //查找到当前页面的body，将后台返回的form替换掉body内容
            document.forms[0].submit();
          }

        })
      },
      AppName() {
        if (this.appname === '') {
          this.isAppName = true;
        } else {
          this.isAppName = false;
        }
      },
      StartTime() {
        if (this.settime === '') {
          this.isStartTime = true;
        } else {
          this.isStartTime = false;
        }
      },
      selectedApp(type) {
        if (type == 1) {
          this.buyAndroid = !this.buyAndroid;
          if (this.buyAndroid == true) {
            $('.selectedAndroid-app').attr('src', '/static/packApp/editApp/createMyApp/安卓版选中.png');
            $('.selectedAndroid-click').attr('src', '/static/packApp/editApp/createMyApp/组 1708.png');
          } else {
            $('.selectedAndroid-app').attr('src', '/static/packApp/editApp/createMyApp/安卓版未选中.png');
            $('.selectedAndroid-click').attr('src', '/static/packApp/editApp/createMyApp/组 1108.png');
          }
        } else {
          this.buyIos = !this.buyIos;
          if (this.buyIos == true) {
            $('.selectedIOS-app').attr('src', '/static/packApp/editApp/createMyApp/苹果版选中.png');
            $('.selectedIOS-click').attr('src', '/static/packApp/editApp/createMyApp/组 1708.png');
          } else {
            $('.selectedIOS-app').attr('src', '/static/packApp/editApp/createMyApp/苹果版未选中.png');
            $('.selectedIOS-click').attr('src', '/static/packApp/editApp/createMyApp/组 1108.png');
          }
        }
        if (this.buyAndroid === true && this.buyIos === false) {
          this.allPrice = 38;
        } else if (this.buyIos === true && this.buyAndroid === false) {
          this.allPrice = 108;
        } else if (this.buyIos === true && this.buyAndroid === true) {
          this.allPrice = 146;
        } else {
          this.allPrice = 0;
        }
      },
      selectedPayMethod(val) {
        this.payType = val;
        if (val == 1) {
          $('.paywx').attr('src', '/static/packApp/editApp/createMyApp/微信支付选中.png');
          $('.payzfb').attr('src', '/static/packApp/editApp/createMyApp/支付宝支付未选中.png');
        } else {
          $('.payzfb').attr('src', '/static/packApp/editApp/createMyApp/支付宝支付选中.png');
          $('.paywx').attr('src', '/static/packApp/editApp/createMyApp/微信支付未选中.png');
        }
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
  }

</script>
<style scoped>
  input {
    height: 36px;
    border-radius: 4px;
    border: 1px solid #989898;
    padding-left: 11px;
    color: #989898;
    background-color: #1d1d1d;
  }


  .red {
    color: #ff3b3b;
    margin-right: 5px;
  }

  .reds {
    color: #ff3b3b;
    margin-right: 5px;
    font-size: 14px;
  }

  input:focus {
    outline: 0;
  }

  .appBox {
    width: 100%;
    padding: 15px;
    background-color: #0f0f0f;
  }

  .appmsg,
  .appstar {
    width: 100%;
    height: auto;
    background-color: #1d1d1d;
  }

  .appmsg {
    padding: 10px;
  }

  .appstar {
    padding: 10px;
  }

  .appbuy {
    padding: 15px;
    margin-top: 10px;
    background-color: #1d1d1d;
  }

  div>>>.el-upload-dragger {
    border: 0px;
    min-width: 210px;
  }

  .appmsg_item,
  .appstar_item {
    width: 100%;
    display: flex;
    align-items: center;
    height: auto;
    margin-bottom: 20px;
  }

  .appmsg_item_title {
    width: 85px;

  }

  .appmsg_item_input,
  .appstar_item_input {
    flex: 1;
  }

  .appmsg_item_input input {
    width: 100%;
    max-width: 500px;
  }

  /* .appstar,
  .upAppIcon {
    margin-top: 30px;
  } */
  .text {
    color: #fff;
  }

  .appstar_item_title {
    width: 160px;
    text-align: right;
    color: #fff;
  }

  .appstar_item_input {
    flex: 1;
  }

  .appstar_item_input input {
    width: 100%;
    max-width: 560px;
  }

  .appstar_item_input input:focus {
    border-color: #ee792d;
  }

  .appstar_item_input>>>.el-select .el-input.is-focus .el-input__inner {
    border-color: #ee792d;
  }

  .el-select-dropdown .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item.selected {
    color: #ee792d;
  }

  .buyItem {
    margin-top: 20px;
    width: 180px;
  }

  .check {
    margin-top: 22px;
  }

  .wx {
    width: 180px;
    height: 64px;
    border-radius: 4px;
    /* border: 1px solid #00B700; */
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0B0B0B;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .zfb {
    width: 180px;
    height: 64px;
    border-radius: 4px;
    /* border: 1px solid #1D5FFF; */
    margin-left: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0B0B0B;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .money {
    height: 30px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 16px;
  }

  .price {
    height: 20px;
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #F65D26;
    line-height: 20px;
  }

  .tishi {
    height: 12px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
    line-height: 12px;
  }

  .el-select {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 560px;
  }

  .el-select>>>.el-input input {
    color: #898989;
    border: 1px solid #898989;
    background-color: #1d1d1d;
  }

  .tips {
    width: 100%;
    height: auto;
    padding: 23px 12px;
    border-radius: 4px;
    /* border: 1px solid #fb5747; */
    display: flex;
    color: #ee792d;
  }

  .tips_title {
    width: 45px;
  }

  .tips_msg {
    flex: 1;
  }

  .avatar-uploader-icon1,
  .avatar-uploader-icon2,
  .avatar-uploader-icon3,
  .avatar-uploader-icon4 {
    background-color: #151515;
  }

  .avatar-uploader-icon1 img {
    width: 210px;
    /* height: 292px; */
    margin-top: 20px;
    border-radius: 4px;
  }

  .avatar-uploader-icon2 img {
    width: 210px;
    /* height: 292px; */
    margin-left: 15px;
    margin-top: 20px;
    border-radius: 4px;
  }

  .avatar-uploader-icon3 img {
    width: 210px;
    /* height: 292px; */
    margin-left: 15px;
    margin-top: 20px;
    border-radius: 4px;
  }

  .avatar-uploader-icon4 img {
    width: 210px;
    /* height: 292px; */
    margin-left: 15px;
    margin-top: 20px;
    border-radius: 4px;
  }

  div>>>input[type="file"] {
    display: none;
  }

  @media (max-width: 576px) {
    .avatar-uploader-icon3 img {
      margin-left: 0px;
    }
  }

  .selectedAndroid {
    width: 100%;
  }

  .selectedAndroid-app {
    width: 367px;
  }

  .selectedAndroid-click {
    width: 22px;
    cursor: pointer;
    margin-left: 15px;
  }

  .selectedIOS {
    width: 100%;
    margin: 15px auto;
  }

  .selectedIOS-app {
    width: 367px;
  }

  .selectedIOS-click {
    width: 22px;
    cursor: pointer;
    margin-left: 15px;
  }

  .submitpay {
    width: 200px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #FA6029;
    opacity: 1;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    background-image: linear-gradient(to right, #f59833, #f95810);
    color: #fff;
  }

</style>
